<template>

  <div id="box">

    <div id="login" v-if="ishow">

      <van-form @submit="onSubmit">

        <van-cell-group inset>

          <van-field

            v-model="admin"

            name="用户名"

            label="用户名"

            placeholder="用户名"

            :rules="[{ required: true, message: '请填写用户名' }]"

            style="margin-top: 15px"

          />

          <van-field

            v-model="password"

            type="password"

            name="密码"

            label="密码"

            placeholder="密码"

            :rules="[{ required: true, message: '请填写密码' }]"

          />

        </van-cell-group>

        <div style="margin: 16px">

          <van-button plain type="primary" @click="getLogin()">登录</van-button>

          <van-button plain type="success" @click="getadd">注册</van-button>

        </div>

      </van-form>

      <span style="color: gray">第三方登录</span><br />

      <!-- <img src="/public/image/微信.png" />

      <img src="/public/image/QQ.png" /> -->

      <img src="/public/image/人脸识别.png" @click="router.push('/face')" />

      <img src="/public/image/邮箱.png" @click="router.push('/email')" />

      <img src="/public/image/电话.png" @click="router.push('/phone')" />

    </div>

    <div id="zhuce" v-else>、

      <form>

        <van-field
        
          v-model="admin"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field

          v-model="phone"

          name="手机号"

          label="手机号"

          placeholder="手机号"

          :rules="[{ required: true, message: '请填写手机号' }]"

        />
        <van-field

          v-model="email"

          name="邮箱"

          label="邮箱"

          placeholder="邮箱"

          :rules="[{ required: true, message: '请填写邮箱' }]"

        />

        <span>用户头像</span>

        <el-upload

          class="avatar-uploader"


          action="http://localhost:3000/cj/upload"

          :show-file-list="false"

          :on-success="handleAvatarSuccess"

        >

          <img v-if="imageUrl" :src="imageUrl" class="avatar" />

          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>

        </el-upload>

        <el-button @click="zhuce">注册</el-button>

      </form>

    </div>

  </div>

</template>

<script setup>

import axios from 'axios'

import { ref } from 'vue'

import { useRouter } from 'vue-router'

import { Plus } from '@element-plus/icons-vue'

const router = useRouter()

const admin = ref('')

const password = ref('')

const phone = ref('')

const email = ref('')

const landlord = ref('')

const imageUrl = ref('')

const ishow = ref(true)

//登录
const getLogin = async () => {

  let obj = {

    admin: admin.value,

    password: password.value

  }
  axios.post('http://localhost:3000/cj/login', obj).then((res) => {

    console.log(res)

    if (res.data.code == 200) {

      console.log(res.data.data)

      localStorage.setItem('user', JSON.stringify(res.data.data))

      localStorage.setItem('accessToken', res.data.accessToken)

      localStorage.setItem('refreshToken', res.data.refreshToken)

      router.push('/home')

    }

  })

}
//上传照片后端回显

const handleAvatarSuccess = (response, uploadFile) => {

  landlord.value = response.data

  console.log(landlord.value)

  imageUrl.value = URL.createObjectURL(uploadFile.raw)

}

const getadd = async () => {

  ishow.value = false

}

const zhuce = async () => {

  let obj = {

    admin: admin.value,

    password: password.value,

    phone: phone.value,

    email: email.value,

    landlord: landlord.value

  }
  axios.post('http://localhost:3000/cj/zhuce', obj).then((res) => {

    if (res.data.code == 200) {

      alert('注册成功')

      ishow.value = true

    } else {

      alert('注册失败')

    }

  })

}
</script>
<style scoped>
#box {
  width: 390px;
  height: 844px;
  background-image: url('/public/image/logins.jpg');
  background-size: 100% 100%;
  display: flex;
}
#login {
  width: 350px;
  height: 290px;
  margin: 0 auto;
  /* border: 1px solid; */
  margin-top: 300px;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  /* box-shadow: 5px 5px 5px rgb(235, 242, 206); */
}
img {
  width: 25px;
  height: 25px;
  margin-left: 30px;
  margin-top: 10px;
}
button {
  margin-left: 10px;
  width: 100px;
  height: 40px;
  border-radius: 10px;
}
#zhuce {
  width: 350px;
  height: 450px;
  margin: 0 auto;
  margin-top: 300px;
  text-align: center;
  background-color: white;
}
#zhuce button {
  margin-top: 20px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
